<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .active{
            color: #e02222 !important;
        }
    </style>
</head>
<body>

    <a class="site-logo" href="index.html" style="text-decoration: none">二手手机收售管理系统</a>

    <a href="javascript:void(0);" class="mobi-toggler"><i class="fa fa-bars"></i></a>

    <!-- BEGIN CART -->
    <div id="headapp">
    <div class="top-cart-block">
        <div v-if="sessionmember!=''" class="top-cart-info">
            <a href="javascript:void(0);" class="top-cart-info-count">{{cartlist.length}} 件</a>
            <a href="javascript:void(0);" class="top-cart-info-value">￥{{total}}</a>
        </div>
        <i v-if="sessionmember!=''" class="fa fa-shopping-cart"></i>

        <div class="top-cart-content-wrapper">
            <div class="top-cart-content">
                <ul class="scroller" style="height: 250px;">


                    <li v-for="cart in cartlist">
                        <a :href="['productdetails.html?id='+cart.product.id]"><img :src="['upload/'+cart.product.filename]"  width="37" height="34"></a>
                        <span class="cart-content-count">x {{cart.num}}</span>
                        <strong><a :href="['productdetails.html?id='+cart.product.id]">{{cart.product.name}}</a></strong>
                        <em>￥{{cart.xjtotal}}</em>
                        <a href="javascript:void(0);" @click="delcart(cart.id)" class="del-goods">&nbsp;</a>
                    </li>


                </ul>
                <div class="text-right">
                    <!--
                    <a href="shop-shopping-cart.html" class="btn btn-default">View Cart</a>
                    -->
                    <a href="cartlist.html" class="btn btn-primary">查看购物车</a>
                </div>
            </div>
        </div>
    </div>
    <!--END CART -->

    <!-- BEGIN NAVIGATION -->
    <div class="header-navigation">
        <ul>
            <li><a href="index.html" :class="biaoji=='index'?'active':''" >首页</a></li>
            <li><a href="newslist.html" :class="biaoji=='newslist'?'active':''">资讯信息</a></li>
            <!--
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="javascript:;">
                    Woman

                </a>

                <ul class="dropdown-menu">
                    <li class="dropdown-submenu">
                        <a href="shop-product-list.html">Hi Tops <i class="fa fa-angle-right"></i></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="shop-product-list.html">Second Level Link</a></li>
                            <li><a href="shop-product-list.html">Second Level Link</a></li>
                            <li class="dropdown-submenu">
                                <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="javascript:;">
                                    Second Level Link
                                    <i class="fa fa-angle-right"></i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="shop-product-list.html">Third Level Link</a></li>
                                    <li><a href="shop-product-list.html">Third Level Link</a></li>
                                    <li><a href="shop-product-list.html">Third Level Link</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="shop-product-list.html">Running Shoes</a></li>
                    <li><a href="shop-product-list.html">Jackets and Coats</a></li>
                </ul>
            </li>
            -->
            <li class="dropdown dropdown-megamenu">
                <a class="dropdown-toggle" :class="biaoji=='productmsg'?'active':''" data-toggle="dropdown" data-target="productmsg.html"  href="productmsg.html" @click="toproductmsg()">
                    商品分类

                </a>
                <ul class="dropdown-menu">
                    <li>
                        <div class="header-navigation-content">
                            <div class="row" style="display:flex;flex-wrap: wrap">


                                <div v-for="category in categorylist" class=" header-navigation-col" >
                                    <h4><a :href="['productmsg.html?categoryid='+category.id]">{{category.name}}</a></h4>
                                    <ul>
                                        <li v-for="ccategory in category.childlist"><a :href="['productmsg.html?childid='+ccategory.id]">{{ccategory.name}}</a></li>
                                    </ul>
                                </div>



                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li class="dropdown dropdown100 nav-catalogue">
                <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="javascript:;">
                    最新商品

                </a>
                <ul class="dropdown-menu">
                    <li>
                        <div class="header-navigation-content">
                            <div class="row">



                                <div v-for="(newsproduct,i) in newsproductlist" v-if="i<4" class="col-md-3 col-sm-4 col-xs-6">
                                    <div class="product-item">
                                        <div class="pi-img-wrapper">
                                            <a :href="['productdetails.html?id='+newsproduct.id]"><img :src="['upload/'+newsproduct.filename]" class="img-responsive" alt="Berry Lace Dress"></a>
                                        </div>
                                        <h3><a :href="['productdetails.html?id='+newsproduct.id]">{{newsproduct.name}}</a></h3>
                                        <div class="pi-price">￥{{newsproduct.price}}</div>
                                        <a href="javascript:;" @click="addcart(newsproduct.id)" class="btn btn-default add2cart">加入购物车</a>
                                    </div>
                                </div>



                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <!--
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="javascript:;">
                    Pages

                </a>

                <ul class="dropdown-menu">
                    <li class="active"><a href="shop-index.html">Home Default</a></li>
                    <li><a href="shop-index-header-fix.html">Home Header Fixed</a></li>
                    <li><a href="shop-index-light-footer.html">Home Light Footer</a></li>
                    <li><a href="shop-product-list.html">Product List</a></li>
                    <li><a href="shop-search-result.html">Search Result</a></li>
                    <li><a href="shop-item.html">Product Page</a></li>
                    <li><a href="shop-shopping-cart-null.html">Shopping Cart (Null Cart)</a></li>
                    <li><a href="shop-shopping-cart.html">Shopping Cart</a></li>
                    <li><a href="shop-checkout.html">Checkout</a></li>
                    <li><a href="shop-about.html">About</a></li>
                    <li><a href="shop-contacts.html">Contacts</a></li>
                    <li><a href="shop-account.html">My account</a></li>
                    <li><a href="shop-wishlist.html">My Wish List</a></li>
                    <li><a href="shop-goods-compare.html">Product Comparison</a></li>
                    <li><a href="shop-standart-forms.html">Standart Forms</a></li>
                    <li><a href="shop-faq.html">FAQ</a></li>
                    <li><a href="shop-privacy-policy.html">Privacy Policy</a></li>
                    <li><a href="shop-terms-conditions-page.html">Terms &amp; Conditions</a></li>
                </ul>
            </li>
-->
            <li><a href="articlelist.html" :class="biaoji=='articlelist'?'active':''">论坛</a></li>

            <!--
            <li><a href="about.html" :class="biaoji=='about'?'active':''">规则公告</a></li>
            <li><a href="help.html" :class="biaoji=='help'?'active':''">帮助中心</a></li>
            -->
            <li><a href="chatlist.html" :class="biaoji=='chatlist'?'active':''">在线留言</a></li>

            <!-- BEGIN TOP SEARCH -->
            <!--
            <li class="menu-search">
                <span class="sep"></span>
                <i class="fa fa-search search-btn"></i>
                <div class="search-box">
                    <form action="#">
                        <div class="input-group">
                            <input type="text" placeholder="商品名称" class="form-control">
                            <span class="input-group-btn">
                      <button class="btn btn-primary" type="submit">搜索</button>
                    </span>
                        </div>
                    </form>
                </div>
            </li>
            -->
            <!-- END TOP SEARCH -->
        </ul>
    </div>
    </div>
    <!-- END NAVIGATION -->
    <!-- END CORE PLUGINS -->

    <!-- BEGIN PAGE LEVEL JAVASCRIPTS (REQUIRED ONLY FOR CURRENT PAGE) -->

    <script src="assets/corporate/scripts/layout.js" type="text/javascript"></script>
</body>
<script type="text/javascript" src="axios/vue.js"></script>
<script type="text/javascript" src="axios/axios.min.js"></script>
<script type="text/javascript" src="axios/qs.js"></script>
<script type="text/javascript" src="axios/getUrlParams.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>


<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
</script>
<script type="text/javascript">
    var qs = Qs
    var headapp = new Vue({
        el: '#headapp',
        data: {
            categorylist:[],//二级类目
            newsproductlist:[],//二级类目
            sessionmember:"",
            cartlist:[],
            total:"",
            biaoji:"",
        },
        mounted(){

            this.biaoji = sessionStorage.getItem("signoutShow")
            this.getfatherlist()
            this.getnewsproductlist()
            this.getcheckmember()

        },
        methods: {
            toproductmsg(){
                location.replace("productmsg.html")
            },

            addcart(productid){
                axios.post('checkmember',qs.stringify({
                })).then(response =>{
                    if(response.data.data==200){
                        axios.post('cartAdd',qs.stringify({
                            productid:productid,
                        })).then(response =>{
                            if(response.data.data==300){
                                layer.msg("不能购买自己的商品",{icon:5})
                            }else if(response.data.data==400){
                                layer.msg("购物车已存在此商品",{icon:5})
                            }else{
                                //location.reload(true)
                                this.getcheckmember()
                                layer.msg("加入购物车成功",{icon:6})
                            }

                        }).catch(error =>{
                            console.log(error)
                        })
                    }else{
                        location.replace("login.html")
                    }
                }).catch(error =>{
                    console.log(error)
                })
            },
             //删除购物车商品
            delcart(id){
                axios.post('cartDel',qs.stringify({
                    id:id,
                })).then(response =>{
                    this.getcheckmember()
                }).catch(error =>{
                    console.log(error)
                })
            },

            /**
             *用户是否登录
             */
            getcheckmember(){
                axios.post('checkmember',qs.stringify({
                })).then(response =>{
                    if(response.data.data==200){
                        this.sessionmember = response.data.sessionmember

                        axios.post('cartList',qs.stringify({
                        })).then(response =>{
                            this.cartlist = response.data.list
                            this.total = response.data.total
                        }).catch(error =>{
                            console.log(error)
                        })
                    }
                }).catch(error =>{
                    console.log(error)
                })
            },

            /**
             * 购物车列表
             */


            //类别列表
            getfatherlist(){
                axios.post('admin/categoryList',qs.stringify({
                })).then(response =>{
                    this.categorylist = response.data.list
                }).catch(error =>{
                    console.log(error)
                })
            },

            //最新商品
            getnewsproductlist(){
                axios.post('productLb',qs.stringify({
                    issj:"yes",
                })).then(response =>{
                    this.newsproductlist = response.data.list
                }).catch(error =>{
                    console.log(error)
                })
            },

        }
    });
</script>

</html>